<template>
    <div>
        <Table border :columns="columns7" :data="sysmember"></Table>
        <Modal
                v-model="contro"
                title="修改用户权限"
                @on-ok="ok"
                @on-cancel="cancel"
              >
            <Form :model="memberinfo" label-position="left" :label-width="100">
                <FormItem label="用户名:">
                    <Input v-model="memberinfo.name" :readonly="true"></Input>
                </FormItem>
                <FormItem label="权限等级:">
                    <Select v-model="memberinfo.roleName" style="width:200px">
                        <Option v-for="item in accessList" :value="item.role" :key="item.role">{{ item.role }}</Option>
                    </Select>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="error"    @click="ok">确定</Button>
                <Button type="error"    @click="cancel">取消</Button>
            </div>
        </Modal>
    </div>


</template>
<script>
    export default {
        name: "sysmember",
        data(){
            return{
                contro:false,
                memberinfo:{
                    id:'',
                    name:'',
                    roleName:'',
                    roleid:''
                },
                columns7:[
                    {
                        title:'用户名',
                        key:'name'
                    },
                    {
                        title:'用户权限',
                        key:'roleName'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.contro="true"
                                            this.edit(params.index)
                                        }
                                    }
                                }, '编辑')
                            ]);
                        }
                    }
                ],
            }
        },
        asyncData:{
            sysmember(){
                return this.$http.get('/admin/sysmanage/sysmember').then(resp=>{
                    return resp.data.data
                })
            },
            accessList(){
                return this.$http.get("/admin/sysmanage/selectAccess").then(resp=>{
                    console.log(resp.data.data)
                    return resp.data.data
                })
            }

        },
        methods: {
            edit (index) {
                //用作判断修改那个用户权限
                this.memberinfo.id = this.sysmember[index].id
                //下面用作显示
                this.memberinfo.name = this.sysmember[index].name;
                this.memberinfo.roleName = this.sysmember[index].roleName
            },
            ok () {
                //注意：for循环必须用of???????
                //检索权限，拿出权限id
                for(var i of this.accessList){
                    if( i.role==this.memberinfo.roleName){
                        this.memberinfo.roleid = i.id
                    }

                }
                console.log(this.memberinfo.id+";"+this.memberinfo.roleid)
                this.$http.post("/admin/sysmanage/updateaccess?id="+this.memberinfo.id+"&roleid="+this.memberinfo.roleid).then(resp=>{
                    console.log(resp.data.status)
                    if(resp.data.status == true){
                        this.$http.get('/admin/sysmanage/sysmember').then(resp=>{
                            console.log(resp.data.data)
                           this.sysmember = resp.data.data
                            this.contro = false
                        })
                    }
                })
            },
            cancel () {
                this.contro=false
            }
        }
    }
</script>

<style scoped>

</style>